import React, { memo } from "react";
import type { FC, ReactNode } from "react";
import { AreaItemV2Wrapper } from "./styled";
import { formatUrlSize } from "@/utils/format";
import { useNavigate } from "react-router-dom";

interface IProps {
  children?: ReactNode;
  songItem: any
}

const AreaItemv2: FC<IProps> = (props: IProps) => {
  const { songItem } = props;
  const navigate = useNavigate()
  const handleNavigateSong = (id: number) => {
    navigate(`/album/${id}`)
  }
  return <AreaItemV2Wrapper>
    <img src={formatUrlSize(songItem?.al?.picUrl, 100)} alt="歌曲图片" onClick={() => handleNavigateSong(songItem.al.id)} className="cover-img" />
    <div className="user-song-info">
      <div className="title">{songItem?.name}</div>
      <div className="singer">{songItem?.ar?.[0]?.name}</div>
    </div>
  </AreaItemV2Wrapper>;
};

export default memo(AreaItemv2);